﻿<!DOCTYPE html>

<html>
<head>
	<meta name="viewport" content="width=device-width" />
	<title>Index</title>
	<link href="Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body>

	<div class="container">

		<div class="page-header">
			<h1>Who's Chu in the Zoo? <small><i>alpha</i></small></h1>
		</div>

		<div style="margin-top: 100px;"></div>

		<div class="row">
			<div class="col-sm-offset-2 col-sm-8">
				<table class="table table-bordered table-hover">
					<tr>
						<th>Player Name</th>
						<th>Player Status</th>
						<th>Chu?</th>
					</tr>

					<tr class="warning">
						<td>Player 1</td>
						<td>Waiting to Roll</td>
						<td></td>
					</tr>

					<tr class="success">
						<td>Player 2</td>
						<td>Rolled</td>
						<td></td>
					</tr>

					<tr class="warning">
						<td>Player 3</td>
						<td>Waiting to Roll</td>
						<td></td>
					</tr>

					<tr class="warning">
						<td>Player 4</td>
						<td>Waiting to Roll</td>
						<td class="danger text-center"><span class="glyphicon glyphicon-hand-left"></span></td>
					</tr>
				</table>
			</div>
		</div>

		<div style="margin-top: 50px;"></div>

		<div class="row">
			<div class="col-sm-offset-4 col-sm-4 text-center">
				<button class="btn btn-block btn-info"><h1>Roll!</h1></button>
			</div>
		</div>

	</div>

	<script src="Scripts/bootstrap.min.js"></script>
</body>
</html>
